<template>
	<ge-page id="ge-page" :vanNavBarObj="vanNavBarObj" :safeAreaBottom="false">
		<view class="my-container">
			<!-- 用户信息区域 -->
			<view class="user-info">
				<view class="avatar">
					<image src="/static/logo.png" class="avatar-img" />
				</view>
				<view class="user-details">
					<view class="username">{{userInfo.username || '未登录'}}</view>
					<view class="user-desc">{{userInfo.desc || '这个人很懒，什么都没留下'}}</view>
				</view>
				<view class="login-btn" v-if="!isLogin" @click="handleLogin">
					登录
				</view>
			</view>
			
			<!-- 功能菜单 -->
			<view class="menu-section">
				<view class="menu-item" @click="switchTabBarMode">
					<view class="menu-icon">🔄</view>
					<view class="menu-text">切换TabBar模式</view>
					<view class="menu-desc">当前: {{currentTabBarMode === 'native' ? '原生' : '自定义'}}</view>
					<view class="menu-arrow">></view>
				</view>
				
				<view class="menu-item" @click="showSettings">
					<view class="menu-icon">⚙️</view>
					<view class="menu-text">设置</view>
					<view class="menu-desc">应用设置</view>
					<view class="menu-arrow">></view>
				</view>
				
				<view class="menu-item" @click="showAbout">
					<view class="menu-icon">ℹ️</view>
					<view class="menu-text">关于</view>
					<view class="menu-desc">版本信息</view>
					<view class="menu-arrow">></view>
				</view>
				
				<view class="menu-item" @click="testVuex">
					<view class="menu-icon">🧪</view>
					<view class="menu-text">测试Vuex</view>
					<view class="menu-desc">状态管理测试</view>
					<view class="menu-arrow">></view>
				</view>
				
				<view class="menu-item" @click="goToLoginDemo">
					<view class="menu-icon">🔐</view>
					<view class="menu-text">登录组件演示</view>
					<view class="menu-desc">查看登录组件</view>
					<view class="menu-arrow">></view>
				</view>
			</view>
			
			<!-- 登出按钮 -->
			<view class="logout-section" v-if="isLogin">
				<van-button @click="handleLogout" type="danger" block>退出登录</van-button>
			</view>
		</view>
	</ge-page>
</template>

<script>
	import { TabBarManager, TabBarMode } from '@/utils/tabbar.js'
	import { mapState } from 'vuex'
	
	export default {
		data() {
			return {
				vanNavBarObj: {
					title: '我的',
					hideLeftArrow: true
				},
				currentTabBarMode: TabBarManager.getMode()
			}
		},
		computed: {
			...mapState('user', ['userInfo', 'isLogin'])
		},
		created() {
			console.log('当前用户状态:', this.isLogin)
			console.log('用户信息:', this.userInfo)
		},
		methods: {
			/**
			 * 处理登录
			 */
			handleLogin() {
				uni.dialog.confirm({
					title: '登录',
					message: '这是登录功能的演示',
				})
				.then(() => {
					// 模拟登录成功
					this.$store.commit('user/GETUSERINFO', {
						username: '演示用户',
						desc: 'UniApp + Vant 开发者'
					})
					uni.toast('登录成功！')
				})
				.catch(() => {
					// 用户取消
				});
			},
			
			/**
			 * 处理登出
			 */
			handleLogout() {
				uni.dialog.confirm({
					title: '退出登录',
					message: '确定要退出登录吗？',
				})
				.then(() => {
					this.$store.commit('user/LOGOUT')
					uni.toast('已退出登录')
				})
				.catch(() => {
					// 用户取消
				});
			},
			
			/**
			 * 切换TabBar模式
			 */
			switchTabBarMode() {
				const targetMode = this.currentTabBarMode === 'native' ? '自定义' : '原生'
				uni.dialog.confirm({
					title: '切换TabBar模式',
					message: `确定要切换到${targetMode}TabBar吗？`,
				})
				.then(() => {
					TabBarManager.toggleMode()
				})
				.catch(() => {
					// 用户取消
				});
			},
			
			/**
			 * 显示设置
			 */
			showSettings() {
				uni.toast('设置功能开发中...')
			},
			
			/**
			 * 显示关于
			 */
			showAbout() {
				uni.dialog.alert({
					title: '关于应用',
					message: 'UniApp + Vant 多端开发模板\n版本: 1.0.11\n支持: APP、H5、微信小程序',
				})
			},
			
			/**
			 * 测试Vuex
			 */
			testVuex() {
				this.$store.dispatch('user/getUserInfo')
				uni.toast('Vuex测试完成，请查看控制台')
			},
			
			/**
			 * 跳转到登录组件演示页面
			 */
			goToLoginDemo() {
				uni.navigateTo({
					url: '/pages/login/demo'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.my-container {
	background: #f5f5f5;
	min-height: 100vh;
}

.user-info {
	display: flex;
	align-items: center;
	padding: 30px 20px;
	background: #fff;
	margin-bottom: 10px;
	
	.avatar {
		margin-right: 15px;
		
		.avatar-img {
			width: 60px;
			height: 60px;
			border-radius: 30px;
		}
	}
	
	.user-details {
		flex: 1;
		
		.username {
			font-size: 18px;
			font-weight: bold;
			color: #333;
			margin-bottom: 5px;
		}
		
		.user-desc {
			font-size: 14px;
			color: #666;
		}
	}
	
	.login-btn {
		padding: 8px 16px;
		background: #EE0A24;
		color: white;
		border-radius: 20px;
		font-size: 14px;
	}
}

.menu-section {
	background: #fff;
	margin-bottom: 10px;
}

.menu-item {
	display: flex;
	align-items: center;
	padding: 15px 20px;
	border-bottom: 1px solid #f0f0f0;
	
	&:last-child {
		border-bottom: none;
	}
	
	&:active {
		background: #f5f5f5;
	}
	
	.menu-icon {
		font-size: 20px;
		margin-right: 15px;
		width: 20px;
	}
	
	.menu-text {
		flex: 1;
		font-size: 16px;
		color: #333;
	}
	
	.menu-desc {
		font-size: 12px;
		color: #999;
		margin-right: 10px;
	}
	
	.menu-arrow {
		color: #c0c0c0;
		font-size: 16px;
	}
}

.logout-section {
	padding: 20px;
}
</style>
